{% extends "templates/base.html" %}

{% block css %}
  <style>
    body {
      margin: 0;
      font-family: sans-serif;
    }
    {% if html %}
      .container * {
        margin: 0 !important;
      }
      {% if ratio %}
        .container {
          overflow: hidden;
          position: relative;
          padding-bottom: {{ ratio }}%;
        }

        .container iframe {
          border: 0;
          height: 100%;
          left: 0;
          position: absolute;
          top: 0;
          width: 100%;
        }
      {% endif %}
    {% endif %}
  </style>
{% endblock %}

{% block body %}
  {% if message %}
    {{ message }}
  {% elif html %}
    <div class="container">
      {{ html | safe }}
    </div>
  {% endif %}
{% endblock %}

{% block js %}
  {# TODO: create a bundle for this instead of relying on this CDN to serve this file #}
  <script type="text/javascript" src="https://pym.nprapps.org/pym.v1.min.js" onload="new pym.Child({ polling: 100 });"></script>
{% endblock %}
